<template>
  <div class="center pannel">
    <el-card>
      <div slot="header">
        <el-steps :space="200" :active="step" finish-status="success" align-center>
          <el-step v-for="(v, index) in steps"  :title="v.title" description="" :key="index"/>
        </el-steps>
      </div>
      <el-container class="drama">
        <el-main class="drama-content">
          <transition name="el-fade-in">
            <component v-bind:is="v.name" :view="v"
            @activeNext="activeNext" :value="value" @change="onChange"/>
          </transition>
        </el-main>

        <el-footer class="but-group">
          <el-button @click="handlePreStep" :disabled="!prev">{{prevLabel}}</el-button>
          <el-button @click="handleNextStep" :disabled="!next || !trigger">{{nextLabel}}</el-button>
        </el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import View from '../views/View';
import License from './install/License';
import Complete from './install/Complete';

export default {
  mixins: [View],
  data() {
    return {
      // 下一页
      trigger: false,
      // 当前页
      step: 0,
      // 数据项
      value: {},
    };
  },
  computed: {
    steps() {
      return this.view.steps || [];
    },
    /** 获取视图
     * @return String
     */
    v() {
      return this.steps[this.step];
    },
    /** 视图个数
     * @return Number
     */
    indexMax() {
      return this.steps.length - 1;
    },
    /**
     * @return Boolean
     */
    nextLabel() {
      return this.step < this.indexMax - 1 ? '下一步' : '完成';
    },
    next() {
      return this.step < this.indexMax;
    },
    /**
     * @return Boolean
     */
    prevLabel() {
      return '上一步';
    },
    prev() {
      return this.step > 0;
    },
  },
  methods: {
    /**
     * 激活/关闭【下一步】按钮
     *
     * @param {Boolean} trigger
     * @return Boolean
     */
    activeNext(trigger) {
      this.trigger = trigger;
    },
    /**
     * 下一步/完成
     */
    handleNextStep() {
      if (this.step > this.indexMax) return;

      this.trigger = false;
      this.step += 1;

      if (this.step === this.indexMax) this.handleComplete();
    },
    /**
     * 上一步
     */
    handlePreStep() {
      if (this.step <= 0) return;

      this.trigger = false;
      this.step -= 1;
    },
    /**
     * 完成后的动作
     */
    handleComplete() {
      this.$HttpPost(this.view.url, this.value).then(undefined, () => {
        this.handlePreStep();
      });
    },
    onChange(tag, v) {
      this.config[tag] = v;
    },
  },
  components: {
    License,
    Complete,
  },
};
</script>

<style scoped>
  .pannle {
    width: 100%;
  }

  .drama {
    margin: 0 auto;
    width: 800px;
  }

  .main .el-menu{
    background-color: transparent!important;
  }

  /* 路由切换动效 */
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-active {
    opacity: 0;
    transform: translateY(30px);
  }

  .but-group .el-button{margin-right: 20px;}
</style>
